<template>
  <div>
    <van-swipe
      width="100%"
      height="5rem"
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item class="box" v-for="item in arr" :key="item.id"
        ><img class="img" :src="item.img" :alt="item.title"
      /></van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import http from "../../utils/http";
export default {
  data() {
    return {
      arr: [],
    };
  },
  methods: {
    getBanner() {
      http.get("/api/bannerlist").then((res) => {
        res.list.forEach((item) => {
          item.img = this.$pregImg + item.img;
          this.arr.push(item);
        });
      });
    },
  },
  mounted() {
    this.getBanner()
  },
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0;
  width: 100%;
  height: 4.6rem;
  text-align: center;
  background-color: #39a9ed;
}
.img {
  width: 100%;
  height: 100%;
}
.my-swipe .van-swipe-item[data-v-6af735e4] {
  font-size: 0;
  line-height: 0;
}
.box {
  height: 100%;
}
</style>
